const express = require("express");
const Vue = require("vue");
const serverRender = require("vue-server-renderer");
const fs = require("fs");
const server = express();

//定义一个配置对象，表示页面相关信息，title meta
const desc = {
  title: "我是一个SSR页面",
  meta: `<meta name="keyword" content="vue-ssr">`,
};
server.get("*", async (req, res) => {
  try {
    const app = new Vue({
      data() {
        return {
          msg: "hello vue ssr",
          url: "你访问的是" + req.url,
        };
      },
      template: "<div>{{msg+url}}</div>",
    });
    //我们希望有一个方法 可以将vue实例转化成 html字符串
    // vue-server-renderer 插件
    const render = serverRender.createRenderer({
      //给一个模板文件
      template: fs.readFileSync("./pageTemplate.html", "utf-8"),
    });
    // 参数（vue实例，模板插值）
    const html = await render.renderToString(app, desc);
    console.log(html, "html==========");
    res.send(html);
  } catch (error) {
    console.log(error);
  }
});

server.listen(3156, () => {
  console.log("http://localhost:3156 服务已启动");
});
